<script setup lang="tsx">
defineProps({
  amount: {
    type: [Number, String]
  },
  type: {
    type: String
  },
  name: {
    type: String
  }
})
const emits = defineEmits(['cancel', 'finish'])

// const cancelPay = () => {
//   emits('cancel')
// }

// const finishPay = () => {
//   emits('finish')
// }
</script>

<template>
  <div class="flex justify-center items-center h-full">
    <div>
      <div class="mb-20px"
        >支付金额：<span class="text-red-600">¥</span
        ><span class="text-red-600 text-2xl">{{ amount }}</span></div
      >
      <div
        >付费项目：<span class="text-2xl">{{ type }}</span
        ><span class="text-2xl">-</span> <span class="text-2xl">{{ name }}</span></div
      >
      <div class="flex flex-col justify-center items-center mt-20">
        <div class="w-[50px] h-[50px] inline-flex justify-center items-center bg_doing">
          <span class="h-[42px] w-[31px]" style="margin-top: -25px">...</span>
        </div>
        <span class="mt-3">处理中</span>
        <span class="color-#7F7A7A">稍后可在支付记录中查看支付结果</span>
      </div>
      <!--
      <div class="mt-100px">
        <el-button type="primary" plain @click="cancelPay">放弃支付</el-button>
        <el-button type="primary" @click="finishPay">已完成支付</el-button>
      </div>
      -->
    </div>
  </div>
</template>

<style lang="less" scoped>
.bg_doing {
  position: relative;
  font-size: 36px;
  color: #f99d31;
  background: url('@/assets/svgs/circle.svg');
}
</style>
